<template>
  <div class="new-purchase-layout">
    <crumbList :navList="navList"></crumbList>
    <div class="new-layout">
      <div class="new-content">
        <el-form :model="newBuild" :rules="newRules" ref="newBuild" label-width="100px" class="demo-ruleForm">
          <h2 class="new-ititle">1.基本信息</h2>
          <el-form-item label="城市" prop="cityName">
            <el-select v-model="newBuild.cityName" placeholder="请选择" class="w280" disabled>
              <el-option :label="item.cityName" :value="item.cityName" v-for="(item,index) in cityMsg"
                         :key="index"></el-option>
            </el-select>
          </el-form-item>
          <div class="new-oneline clearfix">
            <el-form-item label="厂商" prop="factoryName" class="mr fl">
              <el-select v-model="newBuild.factoryName" placeholder="请选择" class="w280" disabled>
                <el-option :label="item.factoryName" :value="item.factoryName" v-for="(item,index) in factoryMsg"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="产品名称" prop="machineName" class="fl">
              <el-select v-model="newBuild.machineName" placeholder="请选择" class="w280" @change="productChange"
                         clearable>
                <el-option :label="item.productName" :value="item.productName"
                           v-for="(item,index) in removeRepeateArray"
                           :key="index"></el-option>
                <li class="new-add-btn" @click="addData=false" v-show="addData" v-if="false">+ 新增</li>
                <li class="new-add-edit" v-show="!addData">
                  <el-form :model="addItem" ref="addItem" :rules="addRule">
                    <el-form-item prop="factoryName">
                      <el-input v-model="addItem.factoryName" placeholder="厂商名称"></el-input>
                    </el-form-item>
                    <el-form-item prop="machineName">
                      <el-input v-model="addItem.machineName" placeholder="产品名称"></el-input>
                    </el-form-item>
                    <el-form-item>
                      <el-button class="new-btn-no buleSpaceBtn" @click="addData=true">取消</el-button>
                      <el-button class="new-btn-ok buleBtn" @click="addData=true">完成</el-button>
                    </el-form-item>
                  </el-form>
                </li>
              </el-select>
            </el-form-item>
          </div>
          <h2 class="new-ititle">2.采购详情</h2>
          <div class="new-oneline clearfix">
            <el-form-item label="采购时间" prop="purchaseTime" class="mr fl">
              <el-date-picker type="date" placeholder="请选择" v-model="newBuild.purchaseTime"
                              class="w280"></el-date-picker>
            </el-form-item>
            <el-form-item label="采购状态" prop="status" class="fl">
              <el-select v-model="newBuild.status" placeholder="请选择">
                <el-option label="签约中" value="签约中"></el-option>
                <el-option label="已完成" value="已完成"></el-option>
              </el-select>
            </el-form-item>
          </div>
          <div class="new-oneline clearfix">
            <el-form-item label="型号" prop="productType" class="mr fl">
              <el-select v-model="newBuild.productType" placeholder="请选择" class="w280">
                <el-option :label="item.productType" :value="item.productType" v-for="(item,index) in productTypeArr"
                           :key="index"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="负责人" prop="chargeMan" class="fl">
              <el-input v-model="newBuild.chargeMan" placeholder="请输入" disabled></el-input>
            </el-form-item>
          </div>
          <div class="new-oneline clearfix">
            <div class="new-num-item fl clearfix">
              <el-form-item label="数量" prop="count" class="fl mr">
                <el-input v-model.number="newBuild.count" placeholder="请输入" class="w280"></el-input>
              </el-form-item>
              <el-form-item prop="unit" class="new-unit fl">
                <el-input v-model="newBuild.unit" placeholder="单位" class="w74"></el-input>
              </el-form-item>
            </div>
            <el-form-item label="交接人" prop="receiveMan" class="fl">
              <el-input v-model="newBuild.receiveMan" placeholder="请输入"></el-input>
            </el-form-item>
          </div>
          <div class="new-oneline clearfix">
            <el-form-item label="单价" prop="price" class="mr fl">
              <el-input v-model.number="newBuild.price" placeholder="请输入" class="w280"></el-input>
            </el-form-item>
            <el-form-item label="合同附件" class="fl">
              <div class="new-upFile">
                <el-button class="new-btn-no buleSpaceBtn skyBagBtn">上传附件</el-button>
                <input type="file" @change="upFile" ref="upload" class="up-btn">
              </div>
            </el-form-item>
          </div>
          <div class="new-oneline clearfix">
            <el-form-item label="备注" prop="remark" class="fl mr3">
              <el-input type="textarea" v-model="newBuild.remark" class="w280 h120" placeholder="请输入"></el-input>
            </el-form-item>
            <div v-if="newBuild.file !==''" class="fl">待上传文件：{{newBuild.file.name}}</div>
          </div>
          <el-form-item class="new-submit">
            <el-button class="new-btn-no buleSpaceBtn" @click="resetForm">取消</el-button>
            <el-button class="new-btn-ok buleBtn" @click="submitForm('newBuild')">完成</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>
<script>
  import crumbList from '../../common/crumbList.vue'
  import ajax from '../../../utils/ajax/index'
  import getParam from '../../../utils/getParams/getParams'
  import resetDate from '../../../utils/date/resetDate'
  import removeRepeateArray from '../../../utils/removeRepeateArray'
  import { mapState } from 'vuex'

  export default {
    data () {
      return {
        navList: [
          {name: '项目详情', path: ''},
          {name: '机具采购', path: 'purchase'},
          {
            name: JSON.parse(sessionStorage.getItem('projectItemData')).name,
            path: 'purchaseList?id=' + getParam('id')
          },
          {
            name: JSON.parse(sessionStorage.getItem('purchase')) ? '修改采购信息' : '新增采购信息',
            path: 'newPurchase?id=' + getParam('id')
          }
        ],
        newBuild: {
          cityName: JSON.parse(sessionStorage.getItem('projectItemData')).cityName,
          factoryName: JSON.parse(sessionStorage.getItem('projectItemData')).factoryName,
          machineName: '',
          purchaseTime: '',
          status: '',
          productType: '',
          chargeMan: JSON.parse(sessionStorage.getItem('projectItemData')).projectDutyName,
          count: '',
          unit: '',
          receiveMan: '',
          price: '',
          file: '',
          remark: ''
        },
        newRules: {
          cityName: [
            {required: true, message: '请选择城市', trigger: 'change'}
          ],
          factoryName: [
            {required: true, message: '请选择厂商', trigger: 'change'}
          ],
          machineName: [
            {required: true, message: '请选择产品名称', trigger: 'change'}
          ],
          status: [
            {required: true, message: '请选择采购状态', trigger: 'change'}
          ],
          productType: [
            {required: true, message: '请输入型号', trigger: 'change'}
          ],
          chargeMan: [
            {required: true, message: '请输入负责人', trigger: 'blur'}
          ],
          count: [
            {required: true, message: '请输入数量'},
            {type: 'number', message: '必须为数字值'}
          ],
          unit: [
            {required: true, message: '请选择单位', trigger: 'blur'}
          ],
          receiveMan: [
            {required: true, message: '请输入交接人', trigger: 'blur'}
          ],
          price: [
            {required: true, message: '请输入数量'},
            {type: 'number', message: '必须为数字值'}
          ],
          remark: [
            {required: true, message: '请填写备注', trigger: 'blur'}
          ]
        },
        addData: true,
        addItem: {
          factoryName: '',
          machineName: ''
        },
        addRule: {
          factoryName: [
            {required: true, message: '请填写厂商名称', trigger: 'blur'}
          ],
          machineName: [
            {required: true, message: '请填写产品名称', trigger: 'blur'}
          ]
        },
        productTypeArr: []
      }
    },
    computed: {
      ...mapState(['cityMsg', 'factoryMsg', 'productMsg']),
      removeRepeateArray () {
        return removeRepeateArray(this.productMsg)
      }
    },
    components: {crumbList},
    created () {
      let itemData = JSON.parse(sessionStorage.getItem('purchase'))
      if (itemData) {
        itemData.file = ''
        this.newBuild = itemData
      }
      this.productChange()
    },
    methods: {
      productChange () {
        let url = this.api2.product.info
        let params = {productName: this.newBuild.machineName}
        ajax.get(url, params).then((res) => {
          if (res.msg.code === '20000') {
            this.productTypeArr = res.data.list
          } else {
            this.$message.error(res.msg.message)
          }
        })
      },
      upFile () {
        let len = this.$refs.upload.files.length
        if (len === 1) {
          if ((this.$refs.upload.files[0].type).indexOf('image/') === -1) {
            this.$message({message: '请上传采购合同附件的图片！', type: 'warning'})
            this.newBuild.file = ''
          } else {
            this.newBuild.file = this.$refs.upload.files[0]
          }
        } else {
          this.newBuild.file = ''
        }
      },
      // 重置数据
      resetForm () {
        this.$router.push('/purchaseList?id=' + getParam('id'))
      },
      // 提交保存数据
      submitForm (formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.newBuild.purchaseTime === '') {
              this.$message({message: '请选择采购时间！', type: 'warning'})
            } else if (this.newBuild.file === '') {
              this.$message({message: '请上传采购合同附件的图片！', type: 'warning'})
            } else {
              this.saveNewData()
            }
          } else {
            this.$message({message: '请填写相关信息！', type: 'warning'})
          }
        })
      },
      saveNewData () {
        let params = new FormData()
        this.newBuild.purchaseTime = resetDate(this.newBuild.purchaseTime)
        params.append('projectCode', getParam('id'))
        params.append('cityName', this.newBuild.cityName)
        params.append('factoryName', this.newBuild.factoryName)
        params.append('machineName', this.newBuild.machineName)
        params.append('purchaseTime', this.newBuild.purchaseTime)
        params.append('status', this.newBuild.status)
        params.append('productType', this.newBuild.productType)
        params.append('chargeMan', this.newBuild.chargeMan)
        params.append('count', this.newBuild.count)
        params.append('unit', this.newBuild.unit)
        params.append('receiveMan', this.newBuild.receiveMan)
        params.append('price', this.newBuild.price)
        params.append('file', this.newBuild.file)
        params.append('remark', this.newBuild.remark)
        let itemData = JSON.parse(sessionStorage.getItem('purchase'))
        if (itemData) {
          params.append('id', itemData.id)
        }
        let url = this.api2.purchase.addProjectData
        ajax.postFile(url, params).then((res) => {
          if (res.msg.code === '20000') {
            this.$message({message: res.msg.message, type: 'success'})
            this.$router.push('/purchaseList?id=' + getParam('id'))
          } else {
            this.$message.error(res.msg.message)
          }
        })
      }
    }
  }
</script>
